<template>
  <div class="overview--wrapper" id="detail">
    <TableTitle>
      <template slot="title">
        员工详情
        <a-tooltip placement="right">
          <template slot="title">
            <span>默认列表中包括待入职、在职、已离职员工</span>
          </template>
          <a-icon type="question-circle" class="primarys" theme="filled" />
        </a-tooltip>
      </template>
      <template slot="action">
        <a-space>
          <a-button type="primary" @click="goUpload">批量导入</a-button>
          <a-badge :count="allCount" :offset="[0, 0]">
            <a-button type="primary" @click="onTodayAdd">今日新增</a-button>
          </a-badge>
        </a-space>
      </template>
    </TableTitle>
    <div style="padding: 0 24px">
      <TableBodyNew
        selectHead
        selection
        tableName="empInfo"
        fieldCompanyId="site"
        :selectedRowKeys.sync="selectedRowKeys"
        :selectedHead.sync="selectedHead"
        :source="staffData"
        :headerRowID="'sortable_list'"
        :columns="columns"
        :columnsOld="columns"
        :isJF="isJF"
        @onClose="handleCancel"
        @onSearch="handleFormSearch"
        @onReload="init"
        @onExport="() => download(1)"
        @onExportAll="() => download(2)"
      >
        <template slot="search">
          <a-input-search placeholder="姓名/手机号/身份证号" allowClear @search="onSearch" />
          <a-select style="width: 200px" placeholder="在职状态" allowClear v-model="statusVal" @change="init">
            <a-select-option :key="1" :value="1">待入职</a-select-option>
            <a-select-option :key="2" :value="2">在职</a-select-option>
            <a-select-option :key="4" :value="4">已离职</a-select-option>
          </a-select>
          <a-range-picker label="入职日期" v-model="joinDateMoment" :placeholder="['入职开始日期', '入职结束日期']" style="width: 100%">
            <a-icon slot="suffixIcon" type="clock-circle" />
          </a-range-picker>
          <a-select label="员工排序" style="width: 100%" placeholder="请选择员工排序" v-model="gmtOrder">
            <a-select-option v-for="(item, index) in staffSort" :key="index" :value="item.key">{{ item.name }}</a-select-option>
          </a-select>
          <a-select label="用工单位" style="width: 100%" placeholder="请选择用工单位" v-model="companyId" :allow-clear="true">
            <a-select-option v-for="(item, index) in companyOptions" :key="index" :value="item.id">{{ item.name }}</a-select-option>
          </a-select>
          <a-select label="员工状态" style="width: 100%" placeholder="请选择员工状态" v-model="formalTypeVal" :allow-clear="true">
            <a-select-option :key="1" :value="1">试用</a-select-option>
            <a-select-option :key="2" :value="2">正式</a-select-option>
          </a-select>
          <a-select label="性别" style="width: 100%" placeholder="请选择性别" v-model="genderVal" :allow-clear="true">
            <a-select-option :key="1" :value="1">男</a-select-option>
            <a-select-option :key="2" :value="2">女</a-select-option>
          </a-select>
          <a-select label="学历" style="width: 100%" placeholder="请选择学历" v-model="highestEducationVal" :allow-clear="true">
            <a-select-option v-for="(item, index) in edu" :key="index" :value="index + 1">{{ item }}</a-select-option>
          </a-select>
          <a-select label="信息补充" style="width: 100%" placeholder="请选择信息补充" v-model="isImproveVal" :allow-clear="true">
            <a-select-option :key="0" :value="0">未完善</a-select-option>
            <a-select-option :key="1" :value="1">已完善</a-select-option>
          </a-select>
          <a-select label="实名认证" style="width: 100%" placeholder="请选择实名认证" v-model="verifiedVal" :allow-clear="true">
            <a-select-option :key="0" :value="0">未认证</a-select-option>
            <a-select-option :key="1" :value="1">已认证</a-select-option>
          </a-select>
          <a-select
            v-if="!isJF"
            v-model="postTypeVal"
            label="工作性质"
            style="width: 100%"
            placeholder="请选择工作性质"
            :options="$store.state.enums.postTypeLst"
            :allow-clear="true"
          />
          <a-select label="政治面貌" style="width: 100%" placeholder="请选择政治面貌" v-model="politicalStatusVal" :allow-clear="true">
            <a-select-option :key="0" :value="0">中共党员</a-select-option>
            <a-select-option :key="1" :value="1">共青团员</a-select-option>
            <a-select-option :key="2" :value="2">普通民众/群众</a-select-option>
            <a-select-option :key="3" :value="3">其它</a-select-option>
          </a-select>
          <a-select label="婚姻状况" style="width: 100%" placeholder="请选择婚姻状况" v-model="maritalStatusVal" :allow-clear="true">
            <a-select-option :key="1" :value="1">已婚</a-select-option>
            <a-select-option :key="2" :value="2">未婚</a-select-option>
            <a-select-option :key="3" :value="3">离异</a-select-option>
          </a-select>
          <a-select
            label="合同签署状态"
            style="width: 100%"
            placeholder="请选择合同签署状态"
            v-model="contractsStatusVal"
            :allow-clear="true"
          >
            <a-select-option :key="0" :value="0">合同未发起</a-select-option>
            <a-select-option :key="1" :value="1">待员工签署</a-select-option>
            <a-select-option :key="2" :value="2">待公司签署</a-select-option>
            <a-select-option :key="3" :value="3">签署完成</a-select-option>
            <a-select-option :key="-1" :value="-1">合同过期未签署</a-select-option>
          </a-select>
          <a-select
            label="标签"
            style="width: 100%"
            placeholder="请选择标签"
            mode="multiple"
            option-label-prop="label"
            v-model="tagsVal"
            :allow-clear="true"
          >
            <a-select-option v-for="item in labelList" :key="item.tagName" :value="item.tagName" :label="item.tagName">{{
              item.tagName
            }}</a-select-option>
          </a-select>
          <a-select label="渠道" style="width: 100%" placeholder="请选择渠道" v-model="channelIdVal" :allow-clear="true">
            <a-select-option v-for="(item, index) in channelNames" :key="index" :value="item.id">{{ item.name }}</a-select-option>
          </a-select>
          <a-select
            label="签约主体"
            style="width: 100%"
            v-model="contractSubject"
            :options="contractSubjectSource"
            :allow-clear="true"
            placeholder="请选择签约主体"
          />
        </template>
        <template slot-scope="prop">
          <a-table
            :class="prop.className"
            :components="prop.components"
            :columns="prop.columns"
            :scroll="{ x: prop.scrollWidth }"
            :customHeaderRow="
              () => {
                return {
                  domProps: {
                    id: prop.headerRowID
                  }
                };
              }
            "
            :data-source="staffData"
            :pagination="pagination"
            :row-key="(d) => d.id"
            :loading="tableLoading"
            :row-selection="{
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange
            }"
            @change="handleTableChange"
          >
            <span slot="name" slot-scope="text, record">
              <div class="today-tags" :class="record.status == 1 || record.status == 4 ? 'pl10' : ''">
                <div class="tags-item" style="background: #ffbb02" v-if="record.status == 1">待入职</div>
                <div class="tags-item" style="background: #b9b9b9" v-if="record.status == 4">已离职</div>
                <a-tooltip placement="top">
                  <template slot="title">
                    <span>{{ text }}</span>
                  </template>
                  {{ text }}
                </a-tooltip>
              </div>
            </span>
            <template slot="contractType" slot-scope="record">
              <span>{{ getContractType(record) }}</span>
            </template>
            <template slot="contractStartTime" slot-scope="text, record">
              <span>{{ record.contractStartTime != null ? formatDate(record.contractStartTime) : "" }}</span>
            </template>
            <template slot="contractEndTime" slot-scope="text, record">
              <span>{{ record.contractEndTime != null ? formatDate(record.contractEndTime) : "" }}</span>
            </template>
            <template slot="contractsStatus" slot-scope="text, record">
              <span>{{ record.contractsStatus != null ? getConstractsStatusType(Number(record.contractsStatus)) : "" }}</span>
            </template>
            <template slot="postType" slot-scope="text, record">
              <span>{{ record.postType != null ? $store.state.enums.postTypeArr[record.postType - 1] : "" }}</span>
            </template>
            <span slot="formalType" slot-scope="text">{{ text != null ? formalType[Number(text - 1)] : "" }}</span>
            <span slot="isImprove" slot-scope="text">{{ text != null ? isImprove[Number(text)] : "" }}</span>
            <span slot="verified" slot-scope="text">{{ text != null ? verified[Number(text)] : "" }}</span>
            <span slot="gender" slot-scope="text">{{ text != null ? gender[text - 1] : "" }}</span>
            <span slot="maritalStatus" slot-scope="text">{{ text != null ? maritalStatus[text - 1] : "" }}</span>
            <span slot="birthStatus" slot-scope="text">{{ text != null ? birthStatus[text - 1] : "" }}</span>
            <span slot="politicalStatus" slot-scope="text">{{ text != null ? renderPoliticalStatus(text) : "" }}</span>
            <span slot="regType" slot-scope="text">{{ text != null ? regType[text - 1] : "" }}</span>
            <span slot="birthday" slot-scope="text">{{ text != null ? text.split(" ")[0] : "" }}</span>
            <span slot="bloodGroup" slot-scope="text">{{ text != null ? bloodGroup[text - 1] : "" }}</span>
            <span slot="teaMethods" slot-scope="text">{{ text != null ? teaMethods[Number(text) - 1] : "" }}</span>
            <span slot="joinDate" slot-scope="text">{{ text != null ? formatDate(text) : "" }}</span>
            <span slot="bankPlace" slot-scope="text">{{ formatAreaValue(text) }}</span>
            <span slot="contractType" slot-scope="text">{{ text != null ? getContractType(text) : "" }}</span>
            <span slot="contractStartTime" slot-scope="text">{{ text != null ? formatDate(text) : "" }}</span>
            <span slot="contractEndTime" slot-scope="text">{{ text != null ? formatDate(text) : "" }}</span>
            <div slot="isImprove" slot-scope="text, record">
              <div class="pointer">
                <span v-if="record.isImprove === true" :class="record.isImprove ? 'color2294FF' : 'colorC0C0C0'">•</span>
                <span v-if="record.isImprove === true">已完善</span>
                <a-popover trigger="click" arrowPointAtCenter>
                  <template slot="content">
                    <div style="width: 200px">
                      <span style="color: red">{record.needComplete}</span>
                      <span>信息未完善</span>
                    </div>
                  </template>
                  <span v-if="record.isImprove === false" :class="record.isImprove ? 'color2294FF' : 'colorC0C0C0'">•</span>
                  <span v-if="record.isImprove === false">未完善</span>
                </a-popover>
              </div>
            </div>
            <div slot="verified" slot-scope="text">
              <div class="pointer">
                <span :class="text ? 'color2294FF' : 'colorC0C0C0'">•</span>
                {{ text ? "已认证" : "未认证" }}
              </div>
            </div>
            <div slot="tag" slot-scope="text">
              <div v-if="text">
                <a-popover placement="topLeft">
                  <template slot="content">
                    <div class="tags-tit">员工标签:</div>
                    <div class="tags-boxs">
                      <p class="tags-item" v-for="(item, index) in text" :key="index">{{ item }}</p>
                    </div>
                  </template>
                  <div class="tags">{{ text[0] }}</div>
                  <span v-if="text.length > 1" class="tags-d">...</span>
                </a-popover>
              </div>
            </div>
            <template slot="action" slot-scope="text, record">
              <a-button size="small" type="link" @click="goDetail(record)">详情</a-button>
            </template>
          </a-table>
        </template>
      </TableBodyNew>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { selectAllStaff } from "@/api/overview/staff";
import { formatDate } from "@/utils/index";
import { renderPoliticalStatus } from "@/views/staff/management/employeeFuncs";
import TableBodyNew from "@/components/Table/tableBodyNew";

const edu = ["小学", "初中", "中专", "高中", "大专", "本科", "硕士", "博士", "其他"];
const formalType = ["试用", "正式"];
const isImprove = ["未完善", "已完善"];
const verified = ["未认证", "已认证"];
const gender = ["男", "女"];
const maritalStatus = ["已婚", "未婚", "离异"];
const birthStatus = ["已育", "未生育"];
const regType = ["城镇户口", "农村户口", "居民户口"];
const bloodGroup = ["A", "B", "AB", "O", "其他"];
const degreeType = ["学士", "硕士", "博士", "未获得学位"];
const teaMethods = ["全日制", "成人教育", "远程教育", "自学考试", "其他非全日制"];
import { columns } from "./detailFuncs";
import ExportMixin from "xqjr-plugin-common/UploadOrExport/exportMixin";
const mixin = new ExportMixin();

import { listByGroupCompanyIdGet } from "../../staff/management/info/api";
import { getChannels } from "@/api/outsourcing/outsourcing";
import { getQueryCount, postQueryCount } from "../api";
import { mapState } from "vuex";
import request from "@/utils/request";
export default {
  components: { TableBodyNew },
  mixins: [mixin],
  props: {
    statusValShow: {
      type: Number,
      default: null
    },
    urr: {
      type: String,
      default: null
    },
    siteId: {
      type: String,
      delete: undefined
    },
    siteName: {
      type: String,
      delete: undefined
    },
    selectTreeId: {
      type: String,
      delete: undefined
    }
  },
  data() {
    return {
      contractSubjectSource: [],
      edu,
      formalType,
      isImprove,
      verified,
      gender,
      maritalStatus,
      birthStatus,
      regType,
      bloodGroup,
      degreeType,
      teaMethods,
      selectedHead: [],
      // 员工排序
      staffSort: [
        { id: 0, name: "按姓氏排列", key: "namePinyin" },
        { id: 1, name: "按创建时间排列", key: "gmtCreate" },
        { id: 2, name: "按修改时间排列", key: "gmtModified" }
      ],
      companyOptions: [],
      joinDateMoment: [],
      columns,
      form: {},
      name: "",
      statusVal: undefined,
      companyId: undefined,
      formalTypeVal: undefined,
      genderVal: undefined,
      highestEducationVal: undefined,
      isImproveVal: undefined,
      verifiedVal: undefined,
      postTypeVal: undefined,
      politicalStatusVal: undefined,
      maritalStatusVal: undefined,
      contractsStatusVal: undefined,
      tagsVal: undefined,
      channelIdVal: undefined,
      contractSubject: undefined,
      gmtOrder: "",
      staffData: [],
      pagination: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: (total) => `共 ${total} 条`,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ["10", "20", "50", "100"]
      },
      selectedRowKeys: [],
      tableLoading: false,
      labelList: [],
      channelNames: [],
      allCount: 0
    };
  },
  computed: {
    ...mapState(["common", "hr"]),
    ...mapGetters(["permissions_site", "isJF"]),
    areaSourceMap() {
      return this.common.areaSourceMap;
    },
    companyList() {
      return this.hr.companyList;
    }
  },
  watch: {
    statusValShow(val) {
      this.statusVal = val === null ? undefined : val;
      this.pagination.current = 1;
      this.init();
    },
    siteId(newValue) {
      this.pagination.current = 1;
      this.init();
    }
  },
  async created() {
    await this.loadContractSubjectSource();
    this.init();
    getChannels({
      pageNo: 1,
      pageSize: 1000
    }).then((res) => {
      this.channelNames = res.data.entities;
    });
  },

  methods: {
    async loadContractSubjectSource() {
      await request({
        url: "/admin/api/v1/dictItems/selectAllDictItem?dictCode=1223",
        method: "get"
      })
        .then((res) => {
          this.contractSubjectSource = res.data ? res.data.map((item) => ({ label: item.dictItemKey, value: item.dictItemValue })) : [];
        })
        .catch((err) => {
          console.log("selectAllDictItem", err);
        });
    },
    formatAreaValue(val) {
      try {
        const strs = val.split(",");
        return strs.map((str) => this.areaSourceMap[str]["name"]).join("-");
      } catch (err) {
        console.log(err);
        return "";
      }
    },
    goUpload() {
      this.$router.push({
        path: "/overview/uploadSite"
      });
    },
    renderPoliticalStatus,
    getContractType(contractType) {
      if (contractType === "laborContractLimit") {
        return "固定期限劳动合同";
      } else if (contractType === "laborContractUnlimit") {
        return "无固定期限劳动合同";
      } else if (contractType === "laborContractJobs") {
        return "以完成一定工作任务为期限的劳动合同";
      } else if (contractType === "internAccords") {
        return "实习协议";
      } else if (contractType === "laborContract") {
        return "劳务合同";
      } else if (contractType === "reemployAccords") {
        return "返聘协议";
      } else if (contractType === "laborContractDispatch") {
        return "劳务派遣合同";
      } else if (contractType === "borrowedContract") {
        return "借调合同";
      } else if (contractType === "engagementLetter") {
        return "约定书";
      } else if (contractType === "partTime") {
        return "兼职合同";
      } else if (contractType === "noviciateAgreement") {
        return "见习协议";
      } else if (contractType === "dimissionContract") {
        return "离职合同";
      } else if (contractType === "retireReEmploy") {
        return "退休返聘合同";
      } else if (contractType === "other") {
        return "其它";
      }
    },
    formatDate(text) {
      return formatDate(text);
    },
    getConstractsStatusType(text) {
      return text + "" === "-1" ? "合同过期未签署" : ["合同未发起", "待员工签署", "待公司签署", "签署完成"][text];
    },
    getMaritalStatus(maritalStatus) {
      if (maritalStatus === 1) {
        return "已婚";
      } else if (maritalStatus === 2) {
        return "未婚";
      } else if (maritalStatus === 3) {
        return "离异";
      }
    },
    getHighestEducation(index) {
      return ["小学", "初中", "中专", "高中", "大专", "本科", "硕士", "博士", "其他"][index - 1];
    },
    getDegreeType(index) {
      return ["学士", "硕士", "博士", "未获得学位"][index - 1];
    },
    download(i) {
      if (i === 2) {
        this.exportData = {
          exportColumns: this.selectedHead,
          empBySiteQuery: {
            name: this.name || null,
            companyId: this.companyId || null,
            status: this.statusVal || null,
            formalType: this.formalTypeVal || null,
            gender: this.genderVal || null,
            highestEducation: this.highestEducationVal || null,
            isImprove: this.isImproveVal,
            verified: this.verifiedVal,
            postType: this.postTypeVal || null,
            politicalStatus: this.politicalStatusVal,
            maritalStatus: this.maritalStatusVal || null,
            contractsStatus: this.contractsStatusVal,
            tagList: this.tagsVal || null,
            channelId: this.channelIdVal || null,
            contractSubject: this.contractSubject || null
          }
        };
        if (this.siteId && this.siteId !== "undefined" && this.siteId !== "-1") {
          this.exportData.empBySiteQuery.companyIdList = this.siteId.split(",");
        }
      } else {
        this.exportData = {
          idList: this.selectedRowKeys,
          exportColumns: this.selectedHead,
          empBySiteQuery: {
            name: this.name || null,
            companyId: this.companyId || null,
            status: this.statusVal || null,
            formalType: this.formalTypeVal || null,
            gender: this.genderVal || null,
            highestEducation: this.highestEducationVal || null,
            isImprove: this.isImproveVal,
            verified: this.verifiedVal,
            postType: this.postTypeVal || null,
            politicalStatus: this.politicalStatusVal,
            maritalStatus: this.maritalStatusVal || null,
            contractsStatus: this.contractsStatusVal,
            tagList: this.tagsVal || null,
            channelId: this.channelIdVal || null,
            contractSubject: this.contractSubject || null
          }
        };
      }
      if (this.joinDateMoment && this.joinDateMoment.length !== 0) {
        this.exportData.empBySiteQuery.joinDateStart = this.moment(this.joinDateMoment[0]).format("YYYY-MM-DD");
        this.exportData.empBySiteQuery.joinDateEnd = this.moment(this.joinDateMoment[1]).format("YYYY-MM-DD");
      }
      this.url = `/hr/api/v1/statisticsPage/selectAllStaffExport`;
      let siteName = "";
      this.permissions_site.forEach((item, index) => {
        if (item.currSite) siteName = item.name;
      });
      this.excelName = `${siteName}签约员工详情.xlsx`;
      this.postDownload();
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    handleTableChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.init();
    },
    goDetail(record) {
      this.$router.push({
        path: "/staffc/detail",
        query: {
          id: record.id,
          userId: record.userId,
          companyId: record.companyId,
          prevpage: location.hash.slice(1)
        }
      });
    },
    handleCancel() {
      this.joinDateMoment = [];
      this.gmtOrder = "";
      this.companyId = undefined;
      this.statusVal = undefined;
      this.formalTypeVal = undefined;
      this.genderVal = undefined;
      this.highestEducationVal = undefined;
      this.isImproveVal = undefined;
      this.verifiedVal = undefined;
      this.postTypeVal = undefined;
      this.politicalStatusVal = undefined;
      this.maritalStatusVal = undefined;
      this.contractsStatusVal = undefined;
      this.tagsVal = undefined;
      this.channelIdVal = undefined;
      this.contractSubject = undefined;
      // this.$refs.form.resetFields();
      this.init();
    },
    handleFormSearch() {
      this.pagination.current = 1;
      this.init();
    },
    onSearch(val) {
      this.pagination.current = 1;
      this.name = val;
      this.init();
      this.selectedRowKeys = [];
    },
    onSelect(val) {
      this.pagination.current = 1;
      // this.form.name = val;
      this.init();
    },
    init() {
      this.selectedRowKeys = [];
      setTimeout(() => {
        this.allCount = sessionStorage.getItem("allCounts");
      }, 500);
      const data = {
        name: this.name || null,
        companyId: this.companyId || null,
        // companyId: this.companyId || null,
        status: this.statusVal || null,
        formalType: this.formalTypeVal || null,
        gender: this.genderVal || null,
        highestEducation: this.highestEducationVal || null,
        isImprove: this.isImproveVal,
        verified: this.verifiedVal,
        postType: this.postTypeVal || null,
        politicalStatus: this.politicalStatusVal,
        maritalStatus: this.maritalStatusVal || null,
        contractsStatus: this.contractsStatusVal,
        tags: this.tagsVal || null,
        channelId: this.channelIdVal || null,
        contractSubject: this.contractSubject || null,
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize,
        orders: this.gmtOrder ? { property: this.gmtOrder } : null
        // "orders[0].property": this.gmtOrder
      };
      if (this.joinDateMoment && this.joinDateMoment.length !== 0) {
        data.joinDateStart = this.moment(this.joinDateMoment[0]).format("YYYY-MM-DD");
        data.joinDateEnd = this.moment(this.joinDateMoment[1]).format("YYYY-MM-DD");
      }
      if (this.siteId && this.siteId !== "undefined" && this.siteId !== "-1") {
        let a = [];
        if (this.siteId && this.siteId !== "-1") {
          a = this.siteId.split(",");
        }
        // data.subjectIds = a;
        data.companyIdList = a;
      }
      if (data?.tags) {
        data.tags = data.tags.join(",");
      }
      this.tableLoading = true;
      selectAllStaff(data)
        .then((res) => {
          const temp = res.data.entities || [];
          temp.forEach((e) => {
            if (e.tag) {
              e.tag = e.tag.split(",");
            }
            if (e.data) {
              for (const key in e.data) {
                e[key] = e.data[key];
              }
            }
          });
          this.staffData = temp;
          this.pagination.total = res.data.entityCount;
          this.tableLoading = false;
        })
        .catch((err) => {
          console.log("error log --> ", err);
          this.tableLoading = false;
        });
      this.companyOptions = this.companyList;
      if (!this.siteId || this.siteId === -1 || this.siteId === "-1" || this.siteId === "undefined") {
        listByGroupCompanyIdGet({})
          .then(({ data }) => {
            this.labelList = data;
          })
          .catch((err) => {
            console.log("error log --> ", err);
          });
      } else {
        listByGroupCompanyIdGet({ companyId: this.siteId })
          .then(({ data }) => {
            this.labelList = data;
          })
          .catch((err) => {
            console.log("error log --> ", err);
          });
      }
    },
    onTodayAdd() {
      this.$router.push({
        name: "staff/todayAdd"
      });
    },
    async onGetQueryCount() {
      try {
        const { data } = await getQueryCount({
          date: this.moment().format("YYYY-MM-DD HH:mm:ss"),
          status: 1
        });
        this.allCount = data.allCount;
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    async onPostQueryCount() {
      try {
        const { data } = await postQueryCount({
          companyIds: this.siteId.split(","),
          date: this.moment().format("YYYY-MM-DD HH:mm:ss"),
          status: 1
        });
        this.topData[0].allCount = data.allCount;
      } catch (err) {
        console.log("error log --> ", err);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.overview-tag-wrapper {
  ::v-deep .ant-tag {
    .anticon-close {
      color: var(--primary);
    }
  }
}
.overview-select-tag-name {
  cursor: pointer;
  margin: 5px;
  color: #666666;
}
.overview-select-tag {
  background-color: #fff !important;
  color: var(--primary) !important;
  border: 1px solid var(--primary);
  cursor: pointer;
  margin: 5px;
}
.overview-no-select-tag {
  background-color: #fff;
  cursor: pointer;
  margin: 5px;
}
.overview--wrapper {
  background-color: #fff;
  // padding: 24px;
  border-radius: 4px;
  .bag-6a66f6-radius-2px {
    background: var(--primary);
    border-radius: 2px;
  }

  .overview--title {
    font-size: 16px;
    color: #000;
  }
  .-top-wrapper {
    margin: 24px 0;
    display: flex;
    justify-content: space-between;
    .-top-left {
      display: flex;
      align-items: center;
    }
  }
}
.today-tags {
  position: relative;
  .tags-item {
    position: absolute;
    top: -8px;
    left: -42px;
    font-size: 12px;
    width: 86px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #fff;
    -webkit-transform: rotateZ(-60deg);
    -ms-transform: rotate(-60deg);
    transform: rotateZ(-48deg);
  }
}
.primarys {
  &:hover {
    color: var(--primary);
  }
  color: rgba(0, 0, 0, 0.25);
}
</style>
